<template>
  <div style="width: 100%; height: 100%; display: flex; padding: 1rem">
    <div style="flex-shrink: 0; width: 220px; height: 100%; overflow-x: auto; margin-right: 1rem">
      <el-menu active-text-color="var(--z-active-color)" background-color="var(--z-theme-color)"
               style="--el-menu-text-color: var(--z-note-color)" @select="handleSelectPlatform">
        <el-menu-item v-for="item in platformList" :index="item.id">
          <div style="width: 100%; display: flex; align-items: center">
            <span style="font-weight: bold; flex: 1">{{ item.name }}</span>
            <el-tag :type="item['prove'] ? '' : 'danger'">
              {{ translate(item['prove'] ? '已配置' : '未配置') }}
            </el-tag>
          </div>
        </el-menu-item>
      </el-menu>
    </div>

    <el-card shadow="hover" style="flex: 1; overflow: auto">
      <el-input :disabled="!platformData['id']" v-model="platformData['prove']" type="textarea" resize="none" show-word-limit maxlength="65535"
          :rows="12" :placeholder="translate('在此输入内容')"/>
      <div style="width: 100%; margin-top: 1rem; display: flex; justify-content: flex-end">
        <el-button :disabled="!platformData['id']" type="primary" @click="handleSubmit">{{ translate('提交') }}</el-button>
      </div>
      <template v-if="platformData.id === 'BILI'">
        <el-alert :closable="false" show-icon style="margin-top: 1rem">
          未登录状态下，连接哔哩哔哩弹幕服务，会导致用户部分信息获取不全。<br/>
          如用户昵称（例子：这是个昵称 -> 这*****）<br/>
          因此需要用户对登录信息（Cookie）进行提交配置。<br/>
        </el-alert>
        <h2 style="color: var(--z-theme-color); margin-left: 1rem">如何填写哔哩哔哩平台配置</h2>
        <el-alert :closable="false" type="warning" show-icon>【1】浏览器登录哔哩哔哩，点击头像进入个人主页</el-alert>
        <el-image src="/images/b1.jpg" style="padding: .4rem" fit="contain"/>
        <el-alert :closable="false" type="warning" show-icon>
          【2】按F12进入开发人员工具，按照顺序获得登录Cookie信息，复制填入上方输入框内并提交保存
        </el-alert>
        <el-image src="/images/b2.jpg" style="padding: .4rem" fit="contain"/>
        <el-alert :closable="false" type="error" show-icon>
          【警告】Cookie数据为用户敏感数据，请勿将该其分享给他人使用。
        </el-alert>
        <el-alert :closable="false" type="error" show-icon>
          【注意】本项目仅对其做本地保存操作。若使用他人开发版本，使用前务必检查源码数据，以防他人非法窃取。
        </el-alert>
        <el-alert :closable="false" type="error" show-icon>
          【免责声明】因使用非原版本程序导致数据泄露，本人概不负责。
        </el-alert>
      </template>
      <template v-if="platformData.id === 'DY'">
        <h2 style="color: var(--z-note-color)">斗鱼弹幕服务暂不需要填写该值</h2>
      </template>
    </el-card>
  </div>
</template>

<script setup>
import {inject, ref} from 'vue'
import {ElMessage} from 'element-plus'

const layout = inject('layout') // 全局样式
const translate = inject('translate') // 翻译器
const platformList = ref([]) // 当前支持的平台列表
const platformData = ref({}) // 平台数据

function handlePullData() {
  layout.value.mainLoading = true
  request({
    url: '/platform/list',
    method: 'GET'
  }).then(res => {
    platformList.value = res.data.data
  }).finally(() => layout.value.mainLoading = false)
}

function handleSelectPlatform(index) {
  let item = platformList.value.find(o => o['id'] === index)
  if (!item) return ElMessage.error(translate('数据异常，请刷新网页'))
  platformData.value = JSON.parse(JSON.stringify(item))
}

function handleSubmit() {
  layout.value.mainLoading = true
  request({
    url: '/platform',
    method: 'PUT',
    data: platformData.value
  }).then(() => {
    handlePullData()
    ElMessage.error('操作成功')
  }).finally(() => layout.value.mainLoading = false)
}

handlePullData()
</script>